{% extends "baseTemp/base_no_cart.html" %}
{% load staticfiles %}

{# 标题描述 #}
{% block title %}
	<title>天天生鲜-订单中心</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
{% endblock title %}

{# 搜索栏标题 #}
{% block page_title %}提交订单{% endblock page_title %}

{# 主体 #}
{% block body %}
	<div id="place_order">
		<h3 class="common_title">确认收货地址</h3>
		<div class="common_list_con clearfix">
				<dl>
					<dt ref='default_addr' data-dfaddr="{{ default_addr }}">寄送到：</dt>
					{% for addr in addrs %}
						{% if addr.id == default_addr %}
							<dd><input type="radio" value="{{ addr.id }}" v-model="user_addr">{{ addr.addr }} （{{ addr.receiver }} 收） {{addr.phone}} （默认）</dd>
						{% else %}
							<dd><input type="radio" value="{{ addr.id }}" v-model="user_addr">{{ addr.addr }} （{{ addr.receiver }} 收） {{addr.phone}}</dd>
						{% endif %}
					{% endfor %}
				</dl>
			<a href="{% url 'user:user_center_site' %}" class="edit_site">编辑收货地址</a>

		</div>

		<h3 class="common_title">支付方式</h3>
		<div class="common_list_con clearfix">
			<div class="pay_style_con clearfix">
				<input type="radio" name="pay_style" value="1" v-model="alipay_way">
				<label class="cash">货到付款</label>
				<input type="radio" name="pay_style" value="2" v-model="alipay_way">
				<label class="weixin">微信支付</label>
				<input type="radio" name="pay_style" value="3" v-model="alipay_way">
				<label class="zhifubao"></label>
				<input type="radio" name="pay_style" value="4" v-model="alipay_way">
				<label class="bank">银行卡支付</label>
			</div>
		</div>

		<h3 class="common_title">商品列表</h3>

		<div class="common_list_con clearfix">
			<ul class="goods_list_th clearfix">
				<li class="col01">商品名称</li>
				<li class="col02">商品单位</li>
				<li class="col03">商品价格</li>
				<li class="col04">数量</li>
				<li class="col05">小计</li>
			</ul>
			<div ref='skus' data-token="{{ csrf_token }}">
				{% for sku in skus %}
					<ul class="goods_list_td clearfix" data-sku-id="{{ sku.id }}">
						<li class="col01">{{ forloop.counter }}</li>
						<li class="col02"><img src="{{ sku.image.url }}"></li>
						<li class="col03">{{ sku.name }}</li>
						<li class="col04">{{ sku.unite }}</li>
						<li class="col05">{{ sku.price }}元</li>
						<li class="col06">{{ sku.count }}</li>
						<li class="col07">{{ sku.amount }}元</li>
					</ul>
				{% endfor %}
			</div>
		</div>

		<h3 class="common_title">总金额结算</h3>

		<div class="common_list_con clearfix">
			<div class="settle_con">
				<div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_price }}元</b></div>
				<div class="transit">运费：<b>{{ transit_price }}元</b></div>
				<div class="total_pay">实付款：<b>{{ total_pay }}元</b></div>
			</div>
		</div>

		<div class="order_submit clearfix">
			{# <a href="javascript:;" id="order_btn" @click.prevent="order_commit">提交订单</a> #}
			<a href="javascript:;" @click.prevent="order_commit">提交订单</a>
		</div>
{% endblock body %}

{% block footer %}
		{{ block.super }}
		<div class="popup_con" v-if="popup">
			<div class="popup">
				<p>订单提交成功！</p>
			</div>
			<div class="mask"></div>
		</div>
	</div> {# vue根节点 #}
{% endblock footer %}

{% block script %}
	<script src="{% static 'js/vue.min.js' %}"></script>
	<script src="{% static 'js/vue-resource.min.js' %}"></script>
	<script src="{% static 'js/place_order.js' %}"></script>
{% endblock script %}

</body>
</html>
